<template>
  <div class="payment_check_inside_notes">
    <div class="detail-table">
      <Row>
        <Col span="24"
             class="detail-table__col detail-table__title">
        处理备注查看
        </Col>
      </Row>
      <template v-if="notes.length === 1">
        <Row>
          <Col span="24"
               class="detail-table__col">
          <span class="detail-table__label--5">处理备注：</span>
          <span class="detail-table__content--5">{{ notes[0].remark }}</span>
          </Col>
        </Row>
      </template>
      <template v-else-if="!notes.length">
        <Row>
          <Col span="24"
               class="detail-table__col"
               style="text-align: center">
          暂无备注
          </Col>
        </Row>
      </template>
      <template v-else>
        <Row v-for="(item, key) in notes"
             :key="key">
          <Col span="24"
               class="detail-table__col">
          <span class="detail-table__label--6">处理备注{{ key + 1 }}：</span>
          <span class="detail-table__content--6">{{ item.remark }}</span>
          </Col>
        </Row>
      </template>
    </div>
  </div>
</template>

<script>
import { getNotes } from '@/api/pay/inside.js'
export default {
  name: 'payment_check_inside_notes',
  data () {
    return {
      notes: []
    }
  },
  mounted () {
    this.getNotes()
  },
  methods: {
    getNotes () {
      getNotes({
        orderCode: this.$route.params.id,
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.notes = result.data || []
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.payment_check_inside_notes {
  padding: 40px 80px;
}
</style>
